<template>
  <div class="home-index">
    <header>
      <div class="logo" @click="$router.push('/')">
        <img src="../../assets/nav-logo.png" alt="" />
      </div>
      <div class="link">
        <ul>
          <li v-for="(v, i) in linkArr" :key="i">
            <router-link :to="{ name: v.link }" active-class="link-active" exact>{{ v.name }}</router-link>
          </li>
        </ul>
        <div class="login">
          <a-dropdown v-if="$store.getters.avatar">
            <span>
              <a-avatar
                size="small"
                :src="$store.getters.avatar"
                class="antd-pro-global-header-index-avatar"
                style="margin-right: 10px"
              />
              <span>{{ $store.getters.nickname }}</span>
            </span>
            <a-menu slot="overlay">
              <a-menu-item key="goIdPhoto" @click="$router.push({ name: 'NewsTypes' })">
                <a-icon type="setting" />
                会员中心
              </a-menu-item>
              <a-menu-item key="logout" @click="handleLogout">
                <a-icon type="logout" />
                退出登录
              </a-menu-item>
            </a-menu>
          </a-dropdown>
          <a-button
            type="primary"
            @click="goLogin"
            v-else
            style="border-radius: 16px; height: 32px; background-color: #3087ff"
            class="login-btn"
          >
            登录/注册
          </a-button>
        </div>
      </div>
    </header>
    <router-view />
    <footer>
      <div class="gxzg">
        <div class="logo" @click="goGX">
          <img src="../../assets/bottom-logo.png" alt="" />
        </div>
        <div class="gxzg-text">
          <div class="text-link">
            <router-link to="/about">关于我们</router-link>
            <router-link to="/agreement" target="_blank">用户协议</router-link>
            <router-link to="/offer">产品报价</router-link>
          </div>
          <div class="text-phone">
            <span>商务合作：web@gxzg.org.cn</span>
            <span>客服电话：400-6000-110</span>
          </div>
          <div class="text-address">
            <span>联系地址：厦门市软件园二期望海路45号201单元</span>
          </div>
        </div>
        <div class="code">
          <a-popover>
            <template slot="content">
              <img src="../../assets/wxcode2.png" alt="" class="big-img" />
            </template>
            <div class="min-img">
              <img src="../../assets/wxcode2.png" alt="" />
              <p style="color:#fff;font-size:12px;margin-top:10px;">可信工作证小程序</p>
            </div>
          </a-popover>
        </div>
      </div>
      <div class="address">
        <div class="address-box">
          <span>Copyright © 2017 公信.中国（京ICP备17051296号-1）</span>
          <span><i></i> 京公网安备 11010802025455号</span>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import RouteView from '@/layouts/RouteView.vue'
import { Modal } from 'ant-design-vue'

import notification from 'ant-design-vue/es/notification'
import { userOut } from '@/api/user'
import { removeToken } from '@/utils/util.js'
export default {
  data() {
    return {
      linkArr: [
        { link: 'Home', name: '首页' },
        { link: 'Offer', name: '产品报价' },
        { link: 'About', name: '关于我们' },
      ],
    }
  },
  components: { RouteView },
  methods: {
    goLogin() {
      this.$router.push({ name: 'login' })
    },
    handleLogout(e) {
      Modal.confirm({
        title: '提示',
        content: '确定要退出吗？',
        card_content_onext: '确定',
        cancelText: '取消',
        onOk: () => {
          userOut({})
            .then((res) => {
              console.log(res)
              this.$notification.success({
                message: '退出登录成功',
                description: '',
              })
              removeToken('pssid')
              setTimeout(() => {
                window.location.reload()
              }, 1500)
            })
            .catch((err) => {})
        },
        onCancel() {},
      })
    },
    // 公信logo跳转
    goGX() {
      window.open('http://xn--vuq70b.xn--fiqs8s')
    },
  },
  mounted() {
    console.log(this.$store.getters.avatar)
  },
}
</script>

<style lang="less" scoped>
.home-index {
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    background: #fff;
    padding: 0 18% 0;
    box-sizing: border-box;
    .logo {
      margin-right: 18%;
      cursor: pointer;
      img {
        width: 170px;
        height: 40px;
      }
    }
    .link {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      ul {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        li {
          width: 160px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          a {
            font-size: 16px;
            color: #222222;
          }
          .link-active {
            color: #3087ff;
            font-weight: bold;
            position: relative;
          }
          .link-active::after {
            display: block;
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #3086ff;
          }
        }
        li:last-child {
          margin-right: 0;
        }
        li:nth-child(2):after,
        li:nth-child(3):after {
          display: block;
          content: '';
          position: absolute;
          right: 0px;
          left: 0;
          width: 1px;
          height: 20px;
          background-color: #e6e8eb;
        }
      }
    }
  }
  footer {
    background: #242b37;
    .gxzg {
      width: 1200px;
      margin: 0 auto;
    }
    .gxzg {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      .logo {
        padding-top: 40px;
        cursor: pointer;
        // i {
        //   display: block;
        //   width: 180px;
        //   height: 37px;
        //   background: url('../../assets/bottom-logo.png') no-repeat center;
        //   background-size: 180px 37px;
        // }
      }
      &-text {
        margin-right: 315px;
        padding: 40px 0 22px 0;
        span,
        a {
          font-size: 16px;
          line-height: 1;
          color: rgba(255, 255, 255, 0.7);
        }
        a:hover {
          color: rgba(255, 255, 255, 1);
        }
        .text-link {
          padding-bottom: 38px;
          margin-bottom: 23px;
          border-bottom: 1px solid #353d4a;
          a {
            margin-right: 31px;
          }
        }
        .text-phone {
          margin-bottom: 16px;
          span {
            margin-right: 31px;
          }
          span:last-child {
            margin-right: 0;
          }
        }
      }
      .code {
        padding: 41px 0 51px 0;
        box-sizing: border-box;

        .min-img {
          width: 104px;
          height: 104px;
          background-color: #ffffff;
          border-radius: 4px;
          box-sizing: border-box;
          padding: 2px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .address {
      background: #1e242f;
      height: 68px;
      box-sizing: border-box;
      &-box {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          font-size: 14px;
          line-height: 1;
          color: #686f79;
          display: flex;
          align-items: center;
          i {
            display: inline-block;
            width: 18px;
            height: 20px;
            background: url('../../assets/pm.png') no-repeat center;
            background-size: 18px 20px;
            margin-right: 7px;
          }
        }
        span:first-child {
          margin-right: 67px;
        }
      }
    }
  }
}
</style>    

<style lang="less">
.login-btn:hover {
  background-color: #046cff !important;
}
.big-img {
  width: 200px;
  height: 200px;
}
</style>